<template>
  <pui-drawer ref="drawerRef" :show="true" title="仿真历史记录" position="right">
    <div class="resource-drawer-content">
      <div class="resource-tab">
        <div class="tabs-content">
          <div class="tabs-tree" v-if="mainRef.treeList.length > 0">
            <pui-tree :show="true" :dataList="mainRef.treeList" @onNodeClick="itemClickHandle"></pui-tree>
          </div>
          <p class="no-data" v-else>-- 暂无数据 --</p>
        </div>
      </div>
    </div>
  </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "CompoHistory"
})
</script>
<script lang="ts" setup>
import { deviceManager } from "@/services/phot_client/device";
import { reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
  'changeState': (val: any) => {},
  'add': (val: any) => {}
})
const mainRef = reactive({
  treeList: [] as any[],
  nowGridHistory: {} as any
});
const addHistory = (data: any, type: any) => {
  proxy.$refs.drawerRef.componentRef.show = true
  if (type === '1') {
    const treeTop = {
      label: data.gridName,
      value: data.gridId,
      id: data.gridId,
      children: []
    }
    mainRef.treeList.push(treeTop)
  }
  if (type === '2') {
    const treeItem = {
      label: new Date().toLocaleString(),
      value: data.gridId,
      id: data.gridId,
      figures: data.figures,
      children: [] as any
    }
    if (data.figures.Sectional_z) {
      treeItem.children.push({
        label: '结构图-XY',
        value: data.figures.Sectional_z.name,
        path: data.figures.Sectional_z.path
      })
    }
    if (data.figures.Field_z) {
      treeItem.children.push({
        label: '光场图-XY',
        value: data.figures.Field_z.name,
        path: data.figures.Field_z.path
      })
    }
    if (data.figures.Refractive_z) {
      treeItem.children.push({
        label: '折射率-XY',
        value: data.figures.Refractive_z.name,
        path: data.figures.Refractive_z.path
      })
    }
    if (data.figures.Sectional_y) {
      treeItem.children.push({
        label: '结构图-XZ',
        value: data.figures.Sectional_y.name,
        path: data.figures.Sectional_y.path
      })
    }
    if (data.figures.Field_y) {
      treeItem.children.push({
        label: '光场图-XZ',
        value: data.figures.Field_y.name,
        path: data.figures.Field_y.path
      })
    }
    if (data.figures.Refractive_y) {
      treeItem.children.push({
        label: '折射率-XZ',
        value: data.figures.Refractive_y.name,
        path: data.figures.Refractive_y.path
      })
    }
    if (data.figures.Sectional_x) {
      treeItem.children.push({
        label: '结构图-YZ',
        value: data.figures.Sectional_x.name,
        path: data.figures.Sectional_x.path
      })
    }
    if (data.figures.Field_x) {
      treeItem.children.push({
        label: '光场图-YZ',
        value: data.figures.Field_x.name,
        path: data.figures.Field_x.path
      })
    }
    if (data.figures.Refractive_x) {
      treeItem.children.push({
        label: '折射率-YZ',
        value: data.figures.Refractive_x.name,
        path: data.figures.Refractive_x.path
      })
    }
    // mainRef.treeList[mainRef.treeList.findIndex(item => item.value === data.gridId )].children.push(treeItem)
    mainRef.nowGridHistory.children.push(treeItem)
  }
}
const init = (gridList: any) => {
  if (!gridList.has(deviceManager.photGridId)) {
    mainRef.treeList = [{label: 'History', value: 'History'}]
    return
  }
  mainRef.nowGridHistory = gridList.get(deviceManager.photGridId)
  mainRef.treeList = [mainRef.nowGridHistory]
}
const itemClickHandle = (e: any) => {
  if (e.figures) {
    proxy.$parent.$refs[`FiguresViewRef-${e.id}`][0].changeFigureFromHistory(e.figures)
  }
}
defineExpose({
  addHistory,
  init
})
</script>

<style lang="scss" scoped>
.resource-drawer-content {
  height: 100%;
  .resource-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .tabs-content {
      flex: 1;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
</style>